/* 基础卡片 */
.list-card {
	@include flex();
	padding: 20rpx;
	margin: 20rpx;
	border-radius: 10rpx;
	box-shadow: 0 0 10px 2rpx rgba(0,0,0,.1);
	.list-card-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		overflow: hidden;
		flex-shrink: 0;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.list-card-content {
		@include flex(space-between,column);
		padding-left: 20rpx;
		width: 100%;
		flex: 1;
		min-width: 0; // 添加这行，允许内容收缩
		.list-card-content-title {
			@include flex();
			align-items: flex-start;
			font-size: 28rpx;
			color: #333333;
			font-weight: 400;
			line-height: 1.2;
			width: 100%;
			text {
				overflow: hidden;
				flex: 1; // 让文本占据剩余空间
				min-width: 0; // 允许文本收
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp:2;
				-webkit-box-orient:vertical;
			}
		}
	}
	
	/* 三种图片类型的公共样式 */
	.list-card-content-desc {
		@include flex();
		font-size: 24rpx;
		width: 100%;
		margin-top: 20rpx;
		.article-type {
			padding: 0 10rpx;
			margin-right: 10rpx;
			border-radius: 30rpx;
			color: $base-color;
			border: 1px solid $base-color;
		}
		.browse-number {
			color: $c-9;
			line-height: 1.5;
		}
	}
	
	/* 多图模式以及大图模式的公共样式 */
	.list-card-top,.list-card-middle,.list-card-bottom {
		@include flex();
		width: 100%;
	}
	
	/* 多图模式 */
	&.mode-column {
		flex-direction: column;
		.list-card-top {
			text {
				font-size: 28rpx;
				color: #333333;
			}
		}
		.list-card-middle {
			margin: 20rpx 0;
			.image-container {
				width: 32%;
				border-radius: 10rpx;
				height: 140rpx;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
			
		}
	}
	&.mode-image {
		flex-direction: column;
		.image-container {
			width: 100%;
			height: 200rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.list-card-middle {
			margin-top: 10rpx;
			text {
				font-size: 28rpx;
				color: #333333;
			}
		}
	}
}